<template>
  <div  class="input">
    <el-input placeholder="请输入内容" v-model="queryString" class="input-with-select"style="font-size: 30px">
      <el-button slot="append" icon="el-icon-search" style="width: 100px" @click="onSubmit" :disabled="disabled"></el-button>
    </el-input>
    <el-tabs class="tabs" v-model="activeName"  type="border-card" @tab-click="handleClick" >
      <el-tab-pane :label="platformList.webname" :name="platformList.webname" :key="platformList.id" v-for="platformList in platformLists"></el-tab-pane>
    </el-tabs>
      <SearchShow :webname="webname" :queryString="key"></SearchShow>
  </div>
</template>

<script>

import SearchShow from "../components/SearchShow";

export default {
  name: "Input",
  components: {SearchShow},
  data() {
    return {

      activeName: '',
      key: null,
      queryString: '',
      webname:'',
      checkboxGroup: [],
      platformLists:[],
    }
  },
  methods: {
    onSubmit() {
      const _this = this
      if (_this.queryString!==""){
        _this.key=_this.queryString
      }
    },
    getPlatformLists(){
      const _this = this
      this.$axios.get(this.$base_url+'sys/webinfo').then(res => {
        _this.platformLists=res.data.data
        _this.activeName=_this.platformLists[0].webname
      })
    },
    handleClick(tab) {
      const _this = this
      var id = tab.index
      var platformid = _this.platformLists[id].id
      switch (platformid){
        case 3:
          _this.webname = '腾讯新闻'
          break;
        case 2:
          _this.webname = '今日头条'
          break;
        case 4:
          _this.webname = '百度热搜'
          break;
        case 1:
          _this.webname = '微博热搜'
          break;
      }
    }
  },
  created() {
    this.getPlatformLists()
  },
  computed:{
    disabled(){
      const _this = this
      if (_this.queryString.length!==0){
        return false
      } else {
        return true
      }
    },
  },
}
</script>

<style scoped>
.input{
  margin-top: 25px;
  width: 1000px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.el-select .el-input {
  width: 130px;

}
.input-with-select .el-input-group__prepend {
  background-color: #fff;

}
/*控制elementui的样式*/
::v-deep .el-tabs__item.is-top{
  width: 250px !important;
  font-size: 20px;
  text-align: center;
}
</style>